<template>
  <div class="wrap">
    <div class="content">
      <el-card class="header-card">
        <div class="item">
          <p>货柜名称：{{data.containerName || '-'}}</p>
          <p>货柜类型：{{getTransferTypeName(data.transferType)}}</p>
          <p>
            <span class="mgr20" v-if="data.bookingNum">订舱号：{{data.bookingNum || '-'}}</span>
            <span class="mgr20" v-if="data.containerNo">货柜编号：{{data.containerNo || '-'}}</span>
            <span class="mgr20" v-if="data.sealNum">封条号：{{data.sealNum || '-'}}</span>
            <span class="mgr20" v-if="data.GPS">GPS编号：{{data.GPS || '-'}}</span>
            <span class="mgr20" v-if="data.flightNo">航班编号：{{data.flightNo}}</span>
            <span class="mgr20" v-if="data.ladingNo">提单号：{{data.ladingNo}}</span>
          </p>
          <p>
            <span class="mgr20" v-if="data.shipsName">船号：{{data.shipsName || '-'}}</span>
            <span class="mgr20" v-if="data.flightNum">航次：{{data.flightNum || '-'}}</span>
            <span class="mgr20" v-if="data.startPort">起运港：{{data.startPort || '-'}}</span>
            <span class="mgr20" v-if="data.targetPort">目的港：{{data.targetPort || '-'}}</span>
          </p>
          <p>
            <span class="mgr20" v-if="data.installDate">装柜日期：{{data.installDate || '-'}}</span>
            <span class="mgr20" v-if="data.boxWeight">箱型箱量：{{data.boxWeight || '-'}}</span>
            <span class="mgr20" v-if="data.customBroker">报关行：{{data.customBroker || '-'}}</span>
            <span class="mgr20" v-if="data.customClearance">清关行：{{data.customClearance || '-'}}</span>
          </p>
          <p>
            <span>货件单单数：{{data.shipmentNum}}</span>
            <span class="mgl20">货箱数量：{{data.boxNum}}</span>
          </p>
          <p>
            <span class="mgr20">总重量：{{data.weight}}kg</span>
            <span class="mgr20">总方数：{{data.squareNumber}}</span>
            <span class="mgr20">总计费重：{{data.calWeight}}</span>
          </p>
          <div class="button">
            <edit-container-btn :row="data" @changeRow="getData" btn-text="修改货柜信息"></edit-container-btn>
          </div>
        </div>
      </el-card>
      <div class="steps">
        <h4 class="season-title">货柜进度</h4>
        <container-steps :history="history" :data="data"></container-steps>
      </div>

      <div class="detail">
        <div class="table-header">
          <div class="left">
            <div class="table-title">货件详情</div>
          </div>
          <div class="right">
            <el-input v-model.trim="searchBoxText" placeholder="搜索箱唛" style="width: 200px"></el-input>
            <template v-if="data.status === 'wait_make_cabinet' && isFirstLegRole()">
              <el-button type="primary" @click="allInstall" class="mgl10">全部已装柜</el-button>
              <el-button type="primary" @click="showEditDialog" class="mgl10">编辑货件</el-button>
            </template>
            <template v-if="data.status === 'wait_sorting' && isInboundSortingRole()">
              <el-button type="primary" @click="allSorted" class="mgl10">全部已分拣</el-button>
            </template>

          </div>
        </div>
        <container-info-table :data="data" :box-table="boxTableBySearch" @changeRow="getData"></container-info-table>
      </div>

      <div class="detail" v-if="logistics && logistics.allDetail.length > 0">
        <div class="table-header">
          <div class="left">
            <h4 class="season-title">货柜轨迹</h4>
          </div>
        </div>
        <div class="logistics-box">
          <template v-if="!logistics">
            <div class="mgb20 f14">
              暂无物流轨迹或管理员尚未配置Track718
            </div>
          </template>
          <template v-else>
            <div class="logistics-item" v-for="(item,index) in logisticsDetail" :key="index">
              <div class="time">{{item.date}}</div>
              <div class="info">{{item.status}}</div>
            </div>
            <el-button type="primary" class="gf-btn" @click="jumpGF" v-if="logistics.website && false">去官网查看</el-button>
            <el-button type="text" class="show-limit" size="medium" @click="logisticsLimit=!logisticsLimit" v-if="logistics.allDetail.length > 5">{{ logisticsLimit ? '展开' : '折叠' }}</el-button>
          </template>
        </div>
      </div>

    </div>

    <el-dialog
      :visible.sync="editDialog"
      width="600px"
      title="编辑货件"
    >
      <div>
        <div style="margin-top: -20px">通过货件箱唛为当前货柜新增或移除货件</div>
        <el-form
          :form="dialogForm"
          label-width="100px"
        >
          <el-form-item
            label="操作类型"
            prop="type"
          >
            <el-radio-group v-model="dialogForm.type">
              <el-radio label="add">新增货件</el-radio>
              <el-radio label="remove">移除货件</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="货件箱唛"
            prop="boxIds"
          >
            <el-input
              type="textarea"
              autosize
              placeholder="请输入"
              v-model="dialogForm.boxIds">
            </el-input>
            <div class="tips">换行输入多个箱唛可批量编辑</div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitDialogForm" :loading="digBtnLoading">确定</el-button>
            <el-button  @click="editDialog = false;">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-dialog>

    <el-dialog
      title="编辑失败箱唛"
      :visible.sync="editFailDialog"
      width="600px"
    >
      <div style="margin-top: -20px">
        <div class="not-found-box mgt10" v-if="notFoundBox.length > 0">
          <div>未查询到以下箱唛：</div>
          <div
            v-for="(item,index) in notFoundBox"
            :key="index"
            class="font-red"
          >
            {{item}}
          </div>
        </div>
        <div class="diff-box mgt10" v-if="diffTypeBox.length > 0">
          <div>以下箱唛运输类型不匹配不可添加：</div>
          <div
            v-for="(item,index) in diffTypeBox"
            :key="index"
            class="font-red"
          >
            {{item}}
          </div>
        </div>
        <div class="installed-box mgt10" v-if="installed.length > 0">
          <div>以下箱唛已经被装柜不可再操作：</div>
          <div
            v-for="(item,index) in installed"
            :key="index"
          >
            {{item}}
          </div>
        </div>
        <div class="other-box mgt10" v-if="otherBox.length > 0">
          <div>以下箱唛已存在其他货柜中，点击继续将添加到当前货柜：</div>
          <div
            v-for="(item,index) in otherBox"
            :key="index"
          >
            {{item.boxId}}
          </div>
        </div>
      </div>
      <template slot="footer">
        <el-button type="primary" v-if="otherBox.length > 0" @click="addOtherBox">继续</el-button>
        <el-button @click="editFailDialog = false;">取消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import ContainerInfoTable from "@/views/container/components/ContainerInfoTable.vue";
import ContainerSteps from "@/views/container/components/ContainerSteps.vue";
import {getTransferTypeName, isFirstLegRole, isInboundSortingRole} from "@/utils/common";
import {deepCopy} from "@/utils";
import {boxChangeContainer, containerBoxAllInstall, containerBoxAllSorted, editContainerBox} from "@/api/container";
import EditContainerBtn from "@/views/container/components/EditContainerBtn.vue";

export default {
  name: "containerInfoView",
  components: {EditContainerBtn, ContainerSteps, ContainerInfoTable},
  computed: {
    history() {
      return this.data.history ? this.data.history : []
    },
    boxTable(){
      return this.data.boxList ? this.data.boxList : []
    },
    logistics(){
      return this.data.logistics ? this.data.logistics : null
    },
    logisticsDetail(){
      if(!this.logistics){
        return []
      }
      const arr = deepCopy(this.logistics.allDetail)
      if(!this.logisticsLimit){
        return arr
      }
      return arr.splice(0, 5)
    },
    isAir(){
      return this.data.transferType === 'air_fast' || this.data.transferType === 'air_slow';
    },
    boxTableBySearch(){
      if(!this.searchBoxText){
        return this.boxTable
      }
      return this.boxTable.filter(item=>{
        return item.boxId.includes(this.searchBoxText)
      })
    },
  },
  data(){
    return {
      removeLoading: false,
      editDialog: false,
      dialogForm: {
        type: 'add',
        boxIds: '',
      },
      digBtnLoading: false,
      notFoundBox: [],
      otherBox: [], // 其他货件的箱唛
      diffTypeBox: [], // 不同运输类型的箱唛
      installed: [], // 已经装柜了 不可再操作
      editFailDialog: false,
      searchBoxText: '',
    }
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  methods: {
    isInboundSortingRole,
    isFirstLegRole,
    getTransferTypeName,
    getData(){
      this.$emit('getData')
    },
    submitDialogForm(){
      const data = {
        id: this.data.id,
        type: this.dialogForm.type,
        boxIds: [],
      }
      data.boxIds = this.dialogForm.boxIds.split('\n')
      data.boxIds = data.boxIds.map(item=> item.trim()).filter(item=> item)
      if(!data.boxIds.length){
        this.$errorMessage('请输入箱唛')
        return
      }
      this.digBtnLoading = true
      this.notFoundBox = [];
      this.otherBox = [];
      this.diffTypeBox = [];
      editContainerBox(data)
        .then(res=>{
          this.digBtnLoading = false
          if(res.error === 0){
            this.notFoundBox = res.data.notFound || []
            this.otherBox = res.data.otherContainer || []
            this.diffTypeBox = res.data.transferTypeDiff || []
            this.installed = res.data.installed || []
            this.getData()
            if(this.notFoundBox.length > 0 || this.otherBox.length > 0 || this.diffTypeBox.length > 0 || this.installed.length > 0){
              this.editFailDialog = true
            }else{
              this.$successMessage(res.message)
            }
            this.editDialog = false
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    // 将其他货柜箱唛添加到当前货柜
    addOtherBox(){
      // 没有箱唛
      if(this.otherBox.length <= 0){
        return
      }
      const data = {
        id: this.data.id,
        boxIds: this.otherBox,
      }
      boxChangeContainer(data)
        .then(res=>{
          if(res.error === 0){
            this.editFailDialog = false
            this.getData()
            this.$successMessage(res.message)
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    allInstall(){
      let title = '确认全部已装柜?'
      let html = `<div>确认当前货柜的所有货件已装柜完毕，变更为所有箱唛为已装柜状态？</div>`
      html += `<div class="font-red">确认后货柜状态将直接变更为“待报关”，无需再操作下方的「确认已装柜」按钮</div>`
      this.$confirm(html,title,{
        dangerouslyUseHTMLString: true,
      })
        .then(()=>{
          containerBoxAllInstall(this.data.id)
            .then(res=>{
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(()=>{})
    },
    allSorted(){
      let title = '确认全部已分拣？'
      let html = `<div>确认当前货件单的所有货件已分拣完毕，变更为所有箱唛为已分拣状态？</div>`
      html += `<div class="font-red">确认后货件单状态将直接变更为“已分拣”，无需再操作下方的「确认已分拣」按钮</div>`
      this.$confirm(html,title,{
        dangerouslyUseHTMLString: true,
      })
        .then(()=>{
          containerBoxAllSorted(this.data.id)
            .then(res=>{
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(()=>{})
    },
    showEditDialog(){
      this.editDialog = true
      this.dialogForm.type = 'add'
      this.dialogForm.boxIds = ''
    },
  },
}
</script>



<style scoped lang="scss">
.wrap{
  padding: 10px 30px 80px;
  .content{
    .header-card{
      position: relative;
      font-size: 14px;
      background-color: rgba(242, 242, 242, 1);
      p{
        margin: 10px 0;
        padding: 0;
      }
      .font-bold{
        font-weight: bold;
      }
      .button{
        position: absolute;
        display: flex;
        flex-direction: column;
        right: 20px;
        top: 30px;
      }
    }
    .detail{
      margin-top: 20px;
      .table-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        .left{
          .table-title{
            font-size: 18px;
            font-weight: 500;
          }
        }

      }
      .logistics-box{
        padding: 20px 30px 0;
        border: 1px solid #cccccc;
        border-radius: 5px;
        .logistics-item{
          margin-bottom: 20px;
          font-size: 15px;
          font-weight: 350;
          .time{
            color: #AAAAAA;
          }
        }
        position: relative;
        .gf-btn{
          position: absolute;
          right: 20px;
          top: 20px;
        }
        .show-limit{
          position: absolute;
          right: 20px;
          bottom: 10px;
        }
      }
    }
  }
  .season-title{
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
